<template>
	<div>
		<div style="margin-top: 10px;display: flex;justify-content: center">
			<el-date-picker
			      v-model="Time"
			      type="daterange"
			      align="right"
			      unlink-panels
			      range-separator="至"
			      start-placeholder="开始日期"
			      end-placeholder="结束日期"
				  value-format="yyyy-MM-dd"
			      :picker-options="pickerOptions" @change="search()">
			</el-date-picker>
		</div>
		<div class="block">
		  <el-timeline v-loading="loading"
                         element-loading-text="正在加载..."
                         element-loading-spinner="el-icon-loading"
                         element-loading-background="rgba(0, 0, 0, 0.8)">
		    <el-timeline-item :timestamp="opLog.addDate" v-for="opLog in opLogs" placement="top" icon="el-icon-time" size="large" color="#0bbd87">
		      <el-card>
		        <h4>{{opLog.userName}}:{{opLog.operate}}</h4>
		        <p>{{opLog.name}} &nbsp;&nbsp;&nbsp; {{opLog.addDate}}</p>
		      </el-card>
		    </el-timeline-item>
		
		  </el-timeline>
		</div>
	</div>	
</template>

<script>
	export default {
	    data() {
	      return {
			loading: false,
			pickerOptions: {
			  shortcuts: [{
				text: '最近一周',
				onClick(picker) {
				  const end = new Date();
				  const start = new Date();
				  start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
				  picker.$emit('pick', [start, end]);
				}
			  }, {
				text: '最近一个月',
				onClick(picker) {
				  const end = new Date();
				  const start = new Date();
				  start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
				  picker.$emit('pick', [start, end]);
				}
			  }, {
				text: '最近三个月',
				onClick(picker) {
				  const end = new Date();
				  const start = new Date();
				  start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
				  picker.$emit('pick', [start, end]);
				}
			  }]
			},
	        opLogs:[],
			Time: ''
	      };
	    },
		methods:{
			initLog(){
				this.loading = true;
				let startTime = '';
				let endTime = '';
				if(this.Time.length == 2){
					startTime = this.Time[0];
					endTime = this.Time[1];
				}		
				console.log(startTime,endTime);
				this.getRequest("/system/log/",{
					startTime: startTime,
					endTime: endTime
				}).then(data =>{
					this.loading = false;
					this.opLogs = data;
				}).catch(err=>{
					this.loading = false;
				})
			},
			search(){
				this.initLog();
			}
		},
		mounted() {
			this.initLog();
		}
	  };
</script>

<style>
</style>
